<script>
/**
 * @desc 新增一个账单记录
 */

import { mapState } from 'vuex'
import FrequentlyUsed from './frequently-used'
import AllCategory from './all-category'

export default {
  name: 'add-record',

  components: { FrequentlyUsed, AllCategory },

  data: () => ({
    wx,
    tabs: ['收入', '支出'],
    tabIndex: 0
  }),

  computed: {
    ...mapState(['systemInfo'])
  },

  methods: {
    handleTab(index) {
      this.tabIndex = index
    }
  }
}
</script>

<template>
  <div :class="$sty.container">
    <div
      :class="$sty.topBar"
      :style="{paddingTop:systemInfo.statusBarHeight+'px', height:'44px'}"
    >
      <div :class="$sty.typeTabs">
        <span
          :class="i===tabIndex ? $sty.tabActive : $sty.tabNormal"
          :key="i"
          @click="()=>handleTab(i)"
          v-for="(v,i) in tabs"
        >{{v}}</span>
      </div>

      <span
        :class="$sty.cancel"
        @click="wx.navigateBack()"
      >取消</span>
    </div>

    <scroll-view
      :class="$sty.scrollView"
      :scroll-y="true"
    >
      <frequently-used/>

      <all-category/>
    </scroll-view>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
